1 files changed, 107 insertions, 0 deletions
diff --git a/app/[lng]/evcp/(evcp)/avl/avl-page-client.tsx b/app/[lng]/evcp/(evcp)/avl/avl-page-client.tsx
new file mode 100644
index 00000000..a9d5713d
--- /dev/null
+++ b/app/[lng]/evcp/(evcp)/avl/avl-page-client.tsx
@@ -0,0 +1,107 @@
+"use client"
+
+import { useEffect, useState } from "react"
+import {
+  ResizablePanelGroup,
+  ResizablePanel,
+  ResizableHandle,
+} from "@/components/ui/resizable"
+import { AvlTable } from "@/lib/avl/table/avl-table"
+import { AvlRegistrationArea } from "@/lib/avl/table/avl-registration-area"
+import { getAvlLists } from "@/lib/avl/service"
+import { AvlListItem } from "@/lib/avl/types"
+import { toast } from "sonner"
+
+interface AvlPageClientProps {
+  initialData: AvlListItem[]
+}
+
+export function AvlPageClient({ initialData }: AvlPageClientProps) {
+  const [avlListData, setAvlListData] = useState<AvlListItem[]>(initialData)
+  const [isLoading, setIsLoading] = useState(false)
+  const [registrationMode, setRegistrationMode] = useState<'standard' | 'project' | null>(null)
+  const [selectedAvlRow, setSelectedAvlRow] = useState<AvlListItem | null>(null)
+
+  // 초기 데이터 설정
+  useEffect(() => {
+    setAvlListData(initialData)
+  }, [initialData])
+
+  // AVL 리스트 데이터 로드 (클라이언트에서 추가 로드 시 사용)
+  const loadAvlListData = async () => {
+    try {
+      setIsLoading(true)
+      // 기본 파라미터로 전체 데이터 조회
+      const result = await getAvlLists({
+        page: 1,
+        perPage: 100, // 충분한 수량으로 조회
+        sort: [{ id: "createdAt", desc: true }],
+        flags: [],
+        filters: [],
+        joinOperator: "and",
+        search: "",
+        isTemplate: "false",
+        constructionSector: "",
+        projectCode: "",
+        shipType: "",
+        avlKind: "",
+        htDivision: "H",
+        rev: "",
+      })
+
+      setAvlListData(result.data)
+    } catch (error) {
+      console.error("AVL 리스트 로드 실패:", error)
+      toast.error("AVL 리스트를 불러오는데 실패했습니다.")
+      setAvlListData([])
+    } finally {
+      setIsLoading(false)
+    }
+  }
+
+  // 리프레시 핸들러
+  const handleRefresh = async () => {
+    await loadAvlListData()
+    toast.success("AVL 리스트가 새로고침되었습니다.")
+  }
+
+  // 등록 모드 변경 핸들러
+  const handleRegistrationModeChange = (mode: 'standard' | 'project') => {
+    setRegistrationMode(mode)
+  }
+
+  // 행 선택 핸들러
+  const handleRowSelect = (selectedRow: AvlListItem | null) => {
+    setSelectedAvlRow(selectedRow)
+  }
+
+  return (
+    <div className="h-screen flex flex-col">
+      <div className="flex-1 overflow-hidden">
+        <ResizablePanelGroup direction="vertical" className="h-full">
+          {/* 상단 패널: AVL 목록 */}
+          <ResizablePanel defaultSize={40} minSize={20}>
+            <div className="h-full p-4">
+              <AvlTable
+                data={avlListData}
+                onRefresh={handleRefresh}
+                isLoading={isLoading}
+                onRegistrationModeChange={handleRegistrationModeChange}
+                onRowSelect={handleRowSelect}
+              />
+            </div>
+          </ResizablePanel>
+
+          <ResizableHandle withHandle />
+
+          {/* 하단 패널: AVL 등록 */}
+          <ResizablePanel defaultSize={60} minSize={30}>
+            <div className="h-full p-4 overflow-x-auto overflow-y-hidden">
+              <AvlRegistrationArea disabled={registrationMode === null} />
+            </div>
+          </ResizablePanel>
+        </ResizablePanelGroup>
+      </div>
+    </div>
+  )
+}